/*
 * @Author: 肖思汗 
 * @Date: 2025-08-25 10:02:13 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2025-08-25 17:58:18
 */

import { Button, Col, Row } from '@nutui/nutui-react-taro';
import { Image, Text, View } from "@tarojs/components";
import Taro, { useDidShow } from '@tarojs/taro';
import clsx from 'clsx';
import { filter } from 'lodash';
import { observer } from "mobx-react-lite";
import { ReactNode, useState } from 'react';
import toDesign from 'src/subPages/Design/designComponent/toDesign';
import utils from 'src/utils/utils';
import styles from './goOnPreDesign.module.less';
import goOnPreDesignStore from './goOnPreDesignStore';

interface Iprops {
    children?: ReactNode
}

// 继续上次的设计
const GoOnPreDesign = observer((props: Iprops) => {

    // const [hasPreDesign, setHasPreDesign] = useState(false);
    // const [designName, setDesignName] = useState('');
    // const [designImage, setDesignImage] = useState('');
    // const [designThumbnail, setDesignThumbnail] = useState('');
    // const [thumbs, setThumbs] = useState<string[]>([]);
    // const [color, setColor] = useState('');
    // const [size, setSize] = useState('');

    // useDidShow(() => {
    //     console.log("useDidShow");
    //     const temp_designer = goOnPreDesignStore.temp_designer;

    //     if (temp_designer) {
    //         const {
    //             productId,//商品id
    //             productNegativeId,//底板id
    //             productDesign,//具体商品设计json
    //             designName,
    //             size,//尺码
    //             color,//颜色名
    //             colorValue,//颜色值
    //         } = temp_designer;

    //         setSize(size);
    //         setColor(color);
    //         setHasPreDesign(true);
    //         setDesignName(designName);
    //         // 设置设计图片和缩略图
    //         if (productDesign && productDesign.thumbs && productDesign.thumbs.length > 0) {
    //             const filteredThumbs = filter(productDesign.thumbs);
    //             setThumbs(filteredThumbs);
    //             setDesignImage(utils.ossSuffix(filteredThumbs[0], 200));
    //             // 设置小缩略图，如果有第二张则用第二张，否则用第一张
    //             if (filteredThumbs.length > 1) {
    //                 setDesignThumbnail(utils.ossSuffix(filteredThumbs[1], 100));
    //             } else {
    //                 setDesignThumbnail(utils.ossSuffix(filteredThumbs[0], 100));
    //             }
    //         }

    //     } else {
    //         setHasPreDesign(false);
    //         setDesignName('');
    //         setDesignImage('');
    //         setDesignThumbnail('');
    //         setThumbs([]);
    //     }

    // });

    if (!goOnPreDesignStore.temp_designer) {
        return null;
    }

    const {
        productId,//商品id
        productNegativeId,//底板id
        productDesign,//具体商品设计json
        designName,
        size,//尺码
        color,//颜色名
        colorValue,//颜色值
    } = goOnPreDesignStore.temp_designer;

    const cancel = () => {
        Taro.showModal({
            title: '确认取消',
            content: '确定要取消当前设计吗？此操作不可撤销。',
            success: (res) => {
                if (res.confirm) {
                    goOnPreDesignStore.setTemp_designer(undefined);
                }
            }
        });
    };

    const thumbs = filter(productDesign.thumbs);

    return (
        <View className={styles.goOnPreDesign} >

            <Row className={clsx(styles.cartItem)}>
                <Row>
                    <Col span={8} style={{ position: 'relative' }}>
                        <Image
                            src={utils.ossSuffix(thumbs[0], 200)}
                            className={styles.itemImage}
                            onClick={(e) => {
                                e.stopPropagation();
                                e.preventDefault();
                                Taro.previewImage({
                                    urls: thumbs.map(url => utils.ossSuffix(url, 1024)),
                                });
                            }}
                        />
                        {thumbs[1] && (
                            <View className={styles.thumbnailContainer}>
                                <Image
                                    className={styles.thumbnailImage}
                                    src={utils.ossSuffix(thumbs[1], 100)}
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        e.preventDefault();
                                        Taro.previewImage({
                                            urls: thumbs.map(url => utils.ossSuffix(url, 1024)),
                                        });
                                    }}
                                />
                            </View>
                        )}
                    </Col>
                    <Col span={16} className={styles.itemDetails}>
                        <View>
                            <Text className={styles.itemName}>{designName}</Text>
                        </View>
                        <View>
                            <Text className={styles.itemInfo}>颜色: {color}</Text>
                        </View>
                        <View>
                            <Text className={styles.itemInfo}>尺码: {size}</Text>
                        </View>
                        <View className={styles.btns}>
                            <Button
                                className={styles.continueBtn}
                                onClick={() => {
                                    const temp_designer = Taro.getStorageSync('temp_designer');
                                    if (temp_designer) {
                                        toDesign({
                                            ...temp_designer,
                                            needupload: true,// 是否需要更新底板
                                        });
                                    }
                                }}
                            >继续设计</Button>

                            <Button
                                className={styles.cancelBtn}
                                onClick={() => {
                                    cancel();
                                }}
                            >取消</Button>
                        </View>
                    </Col>
                </Row>
            </Row>

        </View>
    );
});

export default GoOnPreDesign;